<template>
  <div>
    <mt-cell id="info" :title="userName" is-link>
      <img slot="icon" src="./images/1.jpg" alt="">
    </mt-cell>
    <mt-cell
      title="关于我们"
      to="/modules/aboutus"
      is-link
      >
    </mt-cell>
    <mt-cell
      title="意见反馈"
      to="/modules/feedback"
      is-link
      >
    </mt-cell>
    <mt-cell
      title="版本"
      is-link
      >
      <span>{{ version }}</span>
    </mt-cell>
    <mt-cell @click.native="refreshCourses" title="重新获取课表"></mt-cell>
    <mt-button @click.native="logout" id="loginout" type="danger" size="large" >退出登录</mt-button>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import storage from '@/libs/storage';
import fetch from '@/libs/fetch';
import courseClean from '@/libs/courseClear';

export default {
  methods: {
    logout(){
      storage.clear();
      this.$store.commit('setIsReload', true);
      this.$router.replace('/');
    },
    refreshCourses(){
      fetch.post({
        url: '/getCourseInfo',
        data:{
          f: 1
        },
        success: (res) => {
          // console.log('getCourseInfo', res);
          let data;
          if(res.data.code === 0){
            console.log('重新获取课表');
            if(res.status !== 9999){
              data = courseClean.cleaning(res.data.data);
            }
            this.$store.commit('setCourses', data);
          }
        },
        error: (e) => {
          // console.log('getCourseInfo', e);
          this.go(e);
        }
      })
    }
  },
  computed: {
    ...mapGetters([
      'getUserAccount',
      'getUserInfo'
    ]),
    version(){
      return window.APP_CONFIG.version;
    },
    userName(){
      return this.getUserInfo.username + '   ' + this.getUserAccount.account;
    }
  }
}
</script>

<style scoped>
#info{
  width: 100%;
  height: 100px;
  padding: 20px;
  box-sizing: border-box;
  margin: 0 0 20px 0;
}
#info img{
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: inline-block;
}
#info span{
  display: inline-block;
  vertical-align: top;
  padding-left: 20px;
}
#loginout{
  margin-top: 20px;
}
#tips{
  color: #ff0000;
}
</style>
<style>
#info .mint-cell-wrapper{
  background: none;
}
</style>
